<template>
  <div>
    <van-row>
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-swipe-cell v-for="item in shoplist" :key="item._id">
          <van-col span="6">
            <van-checkbox :name="item" @click="Selected"></van-checkbox>
          </van-col>
          <van-col span="18">
            <van-card :price="item.price" :title="item.title" class="goods-card" :thumb="item.pic">

              <template #footer>
                <van-stepper v-model="item.num" @change="count(item._id,$event)" />
              </template>
            </van-card>
          </van-col>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="del(item)" />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
    </van-row>

    <van-submit-bar :price="Allprice*100" button-text="提交订单">
      <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
    </van-submit-bar>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        result: [],
        shoplist: [],
        checked: false,
        Allprice: 0
      }
    },
    watch: {
      result: {
        handler() {
          this.Allprice = 0
          this.result.forEach(list => {

            this.Allprice += list.num * list.price
          })


        },
        deep: true,
        immediate: true
      }
    },

    methods: {
      checkAll() {
        this.$refs.checkboxGroup.toggleAll(this.checked);
      },
      Selected() {
        if (this.$store.state.shoplist.length === this.result.length && this.$store.state.shoplist.length != 0) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
      del(item) {
        this.Selected()
        // console.log(item);
        this.$store.commit('del', item)

        this.result.forEach((list, index) => {
          if (list._id == item._id) {
            this.result.splice(index, 1)
          }
        })
      },

      count(id, val) {
        // console.log(id,val);
        this.$store.commit('count', {
          id,
          val
        })
      }
    },

    mounted() {
      this.shoplist = this.$store.state.shoplist
    },
  }
</script>
<style lang="scss">
  .van-col {
    height: 120px;
  }

  .van-col--6 {
    justify-content: center;
    display: flex;
  }

  .van-button--square {
    height: 120px;
  }
</style>